<template>
  <div>
    <form>
      <label>姓名：</label>
      <input type="text" v-model="uname" /><br /><br />

      <label>年龄：</label>
      <input type="number" v-model="age" /><br /><br />

      <label>身高：</label>
      <input type="number" v-model="height" />(米)<br /><br />

      <label>体重：</label>
      <input type="number" v-model="weight" />(公斤)<br /><br />

      <label>病史：</label>
      <input type="text" v-model="history" /><br /><br />

      <button @click.prevent="fn">诊断</button>
    </form>

    <p v-show="flag">
      患者{{ uname }} 的诊断结果：
      <span v-if="bmi > 18.58 && bmi < 24.9">正常</span>
      <span v-else-if="bmi < 18">过轻</span>
      <span v-else-if="bmi > 24.9">过重</span>
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: false,
      uname: '',
      age: '',
      height: '',
      weight: '',
      history: '',
      bmi: '',
    }
  },
  methods: {
    fn() {
      this.flag = !this.flag
      this.bmi = this.weight / (this.height * this.height)
    },
  },
}
</script>
